<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>问答-KuangStudy</title>
	<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
</head>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
	.xuanfu:hover
	{
		background-color: #F2F6FC;

	}
</style>
<body style="background: #f2f2f2;">

<div th:replace="~{common/header::header(activeUrl='blog')}"></div>
<main role="main" class="container">
	<div class="row" id="app">
		<div class="col-md-9 blog-main">

			<div class="my-3 p-3 bg-white rounded shadow-sm">

				<h6 class="border-bottom border-gray pb-2 mb-0">
					Q&A 累计：{{count}}
					<span ></span>
					<span class="float-right" >
                        <a href="#" @click.stop="findBlogAll()" >全部</a>
                        /
                        <span v-text="cate"></span>
                    </span>
				</h6>
				<div>
					<div @click="toRead(list.bid)" v-for="(list,k) in blogList"  style="cursor:pointer"  class="xuanfu media text-muted pt-3">
						<!-- 头像 -->
						<img :src="list.authorAvatar" style="border-radius: 5px " width="32" height="32">
						<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
							<!-- 标题 -->
							{{list.title}}
							<a

									class="text-dark font-weight-bold text-decoration-none d-block">

							</a>
							<!-- 状态 -->

							<!-- 浏览量 -->
							<span>
                            <svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
  <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
</svg>
								{{list.views}}
                        </span>
							<span class="badge badge-pill badge-primary mr-1" v-text="list.categoryName">java</span>
							<!-- 时间 -->
							<span
									class="badge badge-light float-right" >
								{{list.gmtCreate | msgFormat}}
                        </span>
						</p>
					</div>

					<!--分页-->
					<nav aria-label="Page navigation example" class="mt-4">
						<el-pagination
								background
								:current-page="index"
								layout="prev, pager, next"
								@current-change="currentchange"
								:total="count">
						</el-pagination>
					</nav>
				</div>
			</div>

		</div>

		<aside class="col-md-3 blog-sidebar">

			<div class="my-3 rounded">
				<p class="mb-0">
					<a th:href="@{/blog/write}" class="btn btn-primary btn-sm btn-block" style="color: white">写文章</a>
				</p>
			</div>

			<div class="p-4 my-3 bg-white rounded">
				<p class="mb-0"> 社区公约: <br> 禁止瞎水博客，内容尽量有实际意义，禁止任何形式的广告，违者暂停账号使用! 申请分类可以在Q群@小狂神 </p>
			</div>

			<div style="cursor:pointer" class="p-4 my-3 bg-white rounded">
				<a  style="color: white" @click.stop="updateCate(cateName)"  class="badge badge-pill badge-primary mr-1" :key="cateName" v-for="(cateName,k) in blogCategory" v-text="cateName"></a>
			</div>

			<div class="p-4 my-3 bg-white rounded">
				<h4 class="font-italic">友情链接</h4>
				<ol class="list-unstyled">
					<li><a href="https://gitee.com/kuangstudy">Gitee</a></li>
					<li><a href="https://space.bilibili.com/95256449">Bilibili</a></li>
				</ol>
			</div>
		</aside>

	</div>

</main>


<div th:replace="~{common/footer::footer}"></div>

<a class="to-top">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>


</body>
<script>
    Vue.filter('msgFormat', function(msg) {
        // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
        return moment(msg).format('YYYY-MM-DD');
    })

    const vm = new Vue({
	    el: '#app',
		data: {
            count: 0,
            index: 1,
			blogCategory: [],
            cate: 'all',
			total: 0,
            blogList: [{}]
		},
	    mounted(){
	        // 获取全部的博客类型
		    axios({
			    url: "/blog/basic",
			    method: "POST"
		    }).then((resp)=>{
		        this.blogCategory = resp.data;
		    })
		    //
		    axios({
			    url: "/blog/list/1",
			    method: "POST",
			    data: {
                    'categoryName': 'all'
			    }
		    }).then((resp)=>{
		        console.log(resp);
		        this.blogList = resp.data.data.blogList;
		        this.index = resp.data.data.index;
		        this.count = resp.data.data.total;
		    })
	    },
	    methods: {
            toRead(bid){
                window.location.href = "/blog/read/"+bid;
            },
            currentchange(index){
               console.log(index);
                this.findAllBlogByCategory(index,this.cate);
            },
		    updateCate(value){
                this.cate = value;
                this.findAllBlogByCategory(1,value);

            },
		    findBlogAll(){
                this.cate = "all";
                // 获取全部信息
                axios({
                    url: "/blog/list/1",
                    method: "POST",
                    data: {
                        'categoryName': 'all'
                    }
                }).then((resp)=>{
                    console.log(resp);
                    this.blogList = resp.data.data.blogList;
                    this.index = resp.data.data.index;
                    this.count = resp.data.data.total;
                })
		    },
		    findAllBlogByCategory(index,value){
			    axios({
				    url: "/blog/list/"+index+"?categoryName="+value,
				    method: 'POST'
			    }).then((resp)=>{
                    console.log(resp);
                    this.blogList = resp.data.data.blogList;
                    this.index = resp.data.data.index;
                    this.count = resp.data.data.total;
                })
		    }
	    }
    })


</script>
</html>
